<template>
  <div class="card-container">
    <div class="card">
      <el-card class="inner-card" shadow="always">
        <template #header>
          <div class="header-container">
            <span style="align-content: center">弹幕源优先</span>
            <el-button
              class="sync-button"
              :type="priorityMark"
              plain
              @click="handleSyncPriority()"
              >同步</el-button
            >
          </div>
        </template>

        <VueDraggable
          v-model="priorityList"
          :animation="150"
          @update="onUpdate"
        >
          <li
            v-for="item in priorityList"
            :key="item.id"
            style="margin-bottom: 8px; list-style-type: none"
          >
            <el-icon><ScaleToOriginal /></el-icon>
            <el-input
              style="margin-left: 8px; width: 240px; pointer-events: none"
              v-model="item.name"
              readonly
            />
          </li>
        </VueDraggable>
      </el-card>
    </div>

    <div class="card">
      <el-card class="inner-card" shadow="always">
        <template #header>
          <div class="header-container">
            <span style="align-content: center">弹幕源拓展</span>
            <el-button
              class="sync-button"
              :type="expandMark"
              plain
              @click="handleSyncExpand()"
              >同步</el-button
            >
          </div>
        </template>
        <el-switch
          size="large"
          v-model="expandSwitch"
          active-text="拓展弹弹Play"
          inactive-text="仅用本地资源"
          style="
            --el-switch-on-color: #13ce66;
            --el-switch-off-color: #a6a9ad;
            margin-left: 19px;
            width: 300px;
          "
        />
      </el-card>

      <el-card class="inner-card" shadow="always">
        <template #header>
          <div class="header-container">
            <span style="align-content: center">剧集表排序</span>
            <el-button
              class="sync-button"
              :type="episodeSortMark"
              plain
              @click="handleSyncEpisodeSort()"
              >同步</el-button
            >
          </div>
        </template>
        <el-switch
          size="large"
          v-model="episodeSortSwitch"
          active-text="集数降序"
          inactive-text="集数升序"
          style="
            --el-switch-on-color: #13ce66;
            --el-switch-off-color: #a6a9ad;
            margin-left: 19px;
            width: 300px;
          "
        />
      </el-card>
    </div>

    <div class="card">
      <el-card class="inner-card" shadow="always">
        <template #header>
          <div class="header-container">
            <span style="align-content: center">线程池设置</span>
            <el-button
              class="sync-button"
              :type="threadPoolMark"
              plain
              @click="handleSyncThreadPool()"
              >同步</el-button
            >
          </div>
        </template>
        <div style="width: 300px; margin-left: 18px">
          核心数
          <el-input-number
            :min="1"
            style="margin-left: 18px; margin-bottom: 15px"
            v-model="threadPool.coreSize"
          /><br />
          最大数
          <el-input-number
            :min="1"
            style="margin-left: 18px; margin-bottom: 15px"
            v-model="threadPool.maxSize"
          />
        </div>
      </el-card>
    </div>

    <div class="card"></div>
  </div>
</template>

<script setup>
import {
  getConfigs,
  syncPriority,
  syncExpand,
  syncEpisodeSort,
  syncThreadPool
} from '@/api/config'
import { ScaleToOriginal } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { ElMessage } from 'element-plus'

// 弹幕源优先
const priorityList = ref([])
const priorityMark = ref('success')
watch(
  priorityList,
  (newList) => {
    if (
      JSON.stringify(priorityList.value) !=
      JSON.stringify(dbConfigInfo.value.priority)
    ) {
      if (priorityList.value != 'warning') {
        priorityMark.value = 'warning'
      }
    }
    newList.forEach((item, index) => {
      item.index = (index + 1).toString()
    })
  },
  { deep: true }
)
const handleSyncPriority = async () => {
  await syncPriority(JSON.stringify(priorityList.value))
  initConfigInfo()
  ElMessage({
    message: '同步成功',
    type: 'success'
  })
  priorityMark.value = 'success'
}

// 资源开关
const expandSwitch = ref(true)
const expandMark = ref('success')
watch(expandSwitch, () => {
  if (expandSwitch.value != dbConfigInfo.value.expandSwitch) {
    if (expandMark.value != 'warning') {
      expandMark.value = 'warning'
    }
  }
})
const handleSyncExpand = async () => {
  await syncExpand(JSON.stringify(expandSwitch.value))
  initConfigInfo()
  ElMessage({
    message: '同步成功',
    type: 'success'
  })
  expandMark.value = 'success'
}

// 剧集排序
const episodeSortSwitch = ref(false)
const episodeSortMark = ref('success')
watch(episodeSortSwitch, () => {
  if (episodeSortSwitch.value != dbConfigInfo.value.episodeSortSwitch) {
    if (episodeSortMark.value != 'warning') {
      episodeSortMark.value = 'warning'
    }
  }
})
const handleSyncEpisodeSort = async () => {
  await syncEpisodeSort(episodeSortSwitch.value)
  initConfigInfo()
  ElMessage({
    message: '同步成功',
    type: 'success'
  })
  episodeSortMark.value = 'success'
}

// 线程数
const threadPool = ref({
  coreSize: 1,
  maxSize: 1
})
const threadPoolMark = ref('success')
watch(
  threadPool,
  () => {
    if (
      JSON.stringify(threadPool.value) !=
      JSON.stringify(dbConfigInfo.value.threadPool)
    ) {
      if (threadPoolMark.value !== 'warning') {
        threadPoolMark.value = 'warning'
      }
    }
  },
  { deep: true }
)
const handleSyncThreadPool = async () => {
  await syncThreadPool(JSON.stringify(threadPool.value))
  initConfigInfo()
  ElMessage({
    message: '同步成功',
    type: 'success'
  })
  threadPoolMark.value = 'success'
}

// 历史配置
const dbConfigInfo = ref({
  priority: [],
  expandSwitch: true,
  episodeSortSwitch: false,
  threadPool: {
    coreSize: 1,
    maxSize: 1
  }
})

const initConfigInfo = async () => {
  const res = await getConfigs()
  // 备份属性设置
  dbConfigInfo.value.priority = res.priority
  dbConfigInfo.value.expandSwitch = res.expand
  dbConfigInfo.value.episodeSortSwitch = res.episodeSort
  dbConfigInfo.value.threadPool.coreSize = res.coreSize
  dbConfigInfo.value.threadPool.maxSize = res.maxSize
  // card属性设置
  priorityList.value = res.priority
  expandSwitch.value = res.expand
  episodeSortSwitch.value = res.episodeSort
  threadPool.value.coreSize = res.coreSize
  threadPool.value.maxSize = res.maxSize
}
initConfigInfo()
</script>

<style scoped>
.card-container {
  display: flex;
  justify-content: space-between;
  margin-left: -4px;
  margin-right: -4px;
}

.card {
  width: 320px;
  margin-top: 10px;
  margin: 0 5px;
}

.inner-card {
  height: max-content;
  border-radius: 14px;
  margin-bottom: 16px;
}

.header-container {
  display: flex;
  justify-content: space-between;
}

.header-container .sync-button {
  margin-left: auto;
}
</style>
